import React, {Component} from 'react';
import { Table,Button,Card,Modal,Form,Input ,message} from 'antd';
import {PlusCircleOutlined} from "@ant-design/icons";
import {reqCategoryList,reqAddCategory,reqUpdateCategory} from '../../api/index.js'
/**
 * 首页路由组件
 */
class Category extends Component {
	state = { 
		visible: false ,
	    operatorType: 0,//0的时候新增，1的时候修改
		data:[],
		updateModalCurrentId: '', //更新模态框中的Input组件的id值
		updateModalCurrentValue: '' //更新模态框中的Input组件的value值
	 };
	 formRef = React.createRef();
	componentDidMount(){
		  this.getCategoryList();
	}
	getCategoryList = () =>{
		reqCategoryList().then(res=>{
			 const {data, status}  = res
			if(status===0){
				this.setState({data: data});
			}
		})
	} 
	// 修改类型
	handleShowUpdateModal=(val)=>{
		 const {_id: categoryId, name: categoryName} = val;
		 //显示模态框，并将回显数据放到状态中
		 this.setState({
		     updateModalCurrentId: categoryId,
		     updateModalCurrentValue: categoryName,
		     operatorType: 1,
		     visible: true
		 },
		 () => {
		     //重置表单
		     this.formRef.current.resetFields();
		 })
	}
	// 新增表单
	handleShowAddModal= () =>{
		  this.setState({
		      visible: true,
			  operatorType:0,
		    });
	}
	// 模块框确定按钮
	handleOkModal=async (val)=>{
		
		 const {categoryName} =  await this.formRef.current.validateFields()
		 const  {operatorType} = this.state
		if(operatorType === 0) {
			this.handleAddCategory(categoryName)
		} else {
			    const {updateModalCurrentId: categoryId} = this.state;
			this.handleUppdateCategory(categoryId,categoryName)
		}
		
	}
	// 新增
	handleAddCategory =async (categoryName)=>{
		const {status, msg} = await reqAddCategory(categoryName);
		if (status === 0) {
		    message.success('新增商品分类成功', 1);
		    this.getCategoryList();
		    //重置表单
		    this.formRef.current.resetFields();
		    //隐藏模态框
		    this.setState({visible: false})
		} else {
		    message.error(msg, 1);
		}
	}
	// 更新
	handleUppdateCategory =async(categoryId,categoryName)=>{
		const {status, msg} = await reqUpdateCategory(categoryId,categoryName);
		if (status === 0) {
		    message.success('新增商品分类成功', 1);
		    this.getCategoryList();
		    //重置表单
		    this.formRef.current.resetFields();
		    //隐藏模态框
		    this.setState({visible: false})
		} else {
		    message.error(msg, 1);
		}
	}
	// 模态框取消按钮
	handleCancelModal=()=>{
		this.setState({
		    visible: false,
		  });
	}

    render() {
		const columns = [
		  {
		    title: '分类名称',
		    dataIndex: 'name',
		    key: 'parentId',
			width: "75%",
			align: 'left'
		  },
		 {
		     title: '操作',
		     key: 'operator',
		     render: (item) => (
		         <Button type="link" onClick={() => {
		             this.handleShowUpdateModal(item)
		         }}>修改分类</Button>
		     ),
		     width: "25%",
		     align: 'center'
		 }
		];
		const {
			data,
		    operatorType,
		    updateModalCurrentValue
		} = this.state
	
		let title = operatorType===0 ? '新增' : '修改';
        return (
		  <div>
		    <Card extra={<Button type="primary" onClick={this.handleShowAddModal}
                                    icon={<PlusCircleOutlined/>}>添加</Button>}>
		    <Table columns={columns}  dataSource={data} />
			</Card>
			
			 <Modal
			          title={`${title}分类`}
			          visible={this.state.visible}
			          onOk={this.handleOkModal}
			          onCancel={this.handleCancelModal}
			          okText="确认"
			          cancelText="取消"
			        >
			          <Form
					         ref={this.formRef}
			                name="basic"
			                labelCol={{ span: 8 }}
			                wrapperCol={{ span: 24 }}
			                initialValues={{ remember: true }}
			                autoComplete="off"
							 initialValues={{categoryName: updateModalCurrentValue}}
			              >
			                <Form.Item
			                  name="categoryName" 
							  rules={[{required: true, whitespace: true, message: '请输入商品分类名称'},]}
			                >
			                  <Input placeholder="请输入商品分类名称" autoComplete="off"/>
			                </Form.Item>
			              </Form>
			        </Modal>
		  </div>
          
        );
    }
}

export default Category
